﻿@using Blazorise.Localization
@using System.Collections.Generic
@inject NavigationManager NavigationManager
@implements IDisposable

<Bar @bind-Visible="@topbarVisible" Breakpoint="Breakpoint.Desktop" Background="Background.White" Shadow="Shadow.Default" ThemeContrast="ThemeContrast.Light">
    <BarBrand>
        <BarItem>
            <BarLink To="">
                <BarIcon IconName="IconName.Dashboard" />
                Blazorise Demo
            </BarLink>
        </BarItem>
    </BarBrand>
    <BarToggler />
    <BarMenu>
        <BarStart>
            <BarItem>
                <BarLink To="https://blazorise.com/">Home</BarLink>
            </BarItem>
            <BarItem>
                <BarLink To="https://blazorise.com/docs/">Documentation</BarLink>
            </BarItem>
            <BarItem>
                <BarDropdown>
                    <BarDropdownToggle>More</BarDropdownToggle>
                    <BarDropdownMenu>
                        <BarDropdownItem To="https://blazorise.com/docs/start/">
                            Quick-Start Guide
                        </BarDropdownItem>
                        <BarDropdownDivider />
                        <BarDropdownItem To="https://blazorise.com/docs/usage/">
                            Usage
                        </BarDropdownItem>
                    </BarDropdownMenu>
                </BarDropdown>
            </BarItem>
            <BarItem>
                <BarDropdown>
                    <BarDropdownToggle>Layout</BarDropdownToggle>
                    <BarDropdownMenu>
                        <BarDropdownItem Clicked="@(()=>OnLayoutTypeChecked("fixed-header"))">
                            @if ( LayoutType == "fixed-header" )
                            {
                                <Icon Name="IconName.CheckCircle" TextColor="TextColor.Success" />
                            }
                            Fixed Header
                        </BarDropdownItem>
                        <BarDropdownItem Clicked="@(()=>OnLayoutTypeChecked("fixed-header-footer-only"))">
                            @if ( LayoutType == "fixed-header-footer-only" )
                            {
                                <Icon Name="IconName.CheckCircle" TextColor="TextColor.Success" />
                            }
                            Fixed Header and Footer only
                        </BarDropdownItem>
                        <BarDropdownItem Clicked="@(()=>OnLayoutTypeChecked("sider-with-header-on-top"))">
                            @if ( LayoutType == "sider-with-header-on-top" )
                            {
                                <Icon Name="IconName.CheckCircle" TextColor="TextColor.Success" />
                            }
                            Sider with Header on top
                        </BarDropdownItem>
                    </BarDropdownMenu>
                </BarDropdown>
            </BarItem>

            <BarItem>
                <BarDropdown>
                    <BarDropdownToggle>Level1</BarDropdownToggle>
                    <BarDropdownMenu>
                        <BarDropdownItem>Level1.1</BarDropdownItem>
                        <BarDropdown>
                            <BarDropdownToggle>Level2</BarDropdownToggle>
                            <BarDropdownMenu>
                                <BarDropdownItem>Level2.1</BarDropdownItem>
                                <BarDropdown>
                                    <BarDropdownToggle>Level3</BarDropdownToggle>
                                    <BarDropdownMenu>
                                        <BarDropdownItem>Level3.1</BarDropdownItem>
                                    </BarDropdownMenu>
                                </BarDropdown>
                            </BarDropdownMenu>
                        </BarDropdown>
                    </BarDropdownMenu>
                </BarDropdown>
            </BarItem>
        </BarStart>
        <BarEnd>
            @if ( gitHubDemoUrl != null )
            {
                <BarItem>
                    <BarLink To="@gitHubDemoUrl" Target="Target.Blank">
                        Source Code <Icon Name="IconName.ExternalLinkSquareAlt" Margin="Margin.Is2.FromStart" />
                    </BarLink>
                </BarItem>
            }
            <BarItem>
                <BarDropdown RightAligned>
                    <BarDropdownToggle><Icon Name="IconName.Language" /></BarDropdownToggle>
                    <BarDropdownMenu>
                        @foreach ( var cultureInfo in LocalizationService.AvailableCultures )
                        {
                            <BarDropdownItem @key="@cultureInfo.Name" Clicked="@(()=>SelectCulture(cultureInfo.Name))">
                                @if ( cultureInfo.IsNeutralCulture )
                                {
                                    @cultureInfo.EnglishName
                                }
                                else
                                {
                                    @cultureInfo.Parent.EnglishName
                                }
                            </BarDropdownItem>
                        }
                    </BarDropdownMenu>
                </BarDropdown>
            </BarItem>
            <BarItem>
                <BarDropdown RightAligned>
                    <BarDropdownToggle><Icon Name="IconName.Tint" /> Theme</BarDropdownToggle>
                    <BarDropdownMenu Style="padding: 15px; min-width:550px;">
                        <Row>
                            <Column Margin="Margin.Is2.FromBottom">
                                <Field>
                                    <Switch TValue="bool" Checked="@(Theme?.Enabled == true)" CheckedChanged="@ThemeEnabledChanged">Theme enabled</Switch>
                                </Field>
                            </Column>
                        </Row>
                        <Row>
                            <Column Margin="Margin.Is2.FromBottom">
                                <Field>
                                    <Check TValue="bool" Checked="@(Theme?.IsGradient == true)" CheckedChanged="@ThemeGradientChanged">Gradient colors</Check>
                                </Field>
                                <Field>
                                    <Check TValue="bool" Checked="@(Theme?.IsRounded == true)" CheckedChanged="@ThemeRoundedChanged">Rounded elements</Check>
                                </Field>
                            </Column>
                        </Row>
                        <Row>
                            <Column>
                                <Container Fluid>
                                    <ThemeColorSelector Value="@(Theme?.ColorOptions?.Primary)" ValueChanged="@ThemeColorChanged"></ThemeColorSelector>
                                </Container>
                            </Column>
                        </Row>
                    </BarDropdownMenu>
                </BarDropdown>
            </BarItem>
            <BarItem>
                <BarLink To="https://github.com/Megabit/Blazorise">GitHub</BarLink>
            </BarItem>
        </BarEnd>
    </BarMenu>
</Bar>
@code {
    protected override async Task OnInitializedAsync()
    {
        await SelectCulture( "en-US" );

        await base.OnInitializedAsync();
    }

    Task SelectCulture( string name )
    {
        LocalizationService.ChangeLanguage( name );

        return Task.CompletedTask;
    }

    private bool topbarVisible = false;

    Task OnLayoutTypeChecked( string layoutType )
    {
        LayoutType = layoutType;

        return LayoutTypeChanged.InvokeAsync( layoutType );
    }

    Dictionary<string, string> demoToGitHubMapping = new Dictionary<string, string>
    {
        { "", "Pages/Dashboard.razor" },
        { "tests/alerts", "Pages/Tests/AlertsPage.razor" },
        { "tests/animate", "Pages/Tests/AnimatePage.razor" },
        { "tests/autocomplete", "Pages/Tests/AutocompletesPage.razor" },
        { "tests/badges", "Pages/Tests/BadgesPage.razor" },
        { "tests/utilities/borders", "Pages/Tests/BordersPage.razor" },
        { "tests/breadcrumbs", "Pages/Tests/BreadcrumbsPage.razor" },
        { "tests/buttons", "Pages/Tests/ButtonsPage.razor" },
        { "tests/cards", "Pages/Tests/CardsPage.razor" },
        { "tests/carousel", "Pages/Tests/CarouselPage.razor" },
        { "tests/charts/annotations", "Pages/Tests/ChartsAnnotationsPage.razor" },
        { "tests/charts/datalabels", "Pages/Tests/ChartsDataLabelsPage.razor" },
        { "tests/charts", "Pages/Tests/ChartsPage.razor" },
        { "tests/collapse", "Pages/Tests/CollapsePage.razor" },
        { "tests/cropper", "Pages/Tests/CropperPage.razor" },
        { "tests/dragdrop", "Pages/Tests/DragDropPage.razor" },
        { "tests/dropdownlist", "Pages/Tests/DropdownListPage.razor" },
        { "tests/dropdowns", "Pages/Tests/DropdownsPage.razor" },
        { "tests/figures", "Pages/Tests/FigurePage.razor" },
        { "tests/file-picker", "Pages/Tests/FilePickerPage.razor" },
        { "tests/utilities/flex", "Pages/Tests/FlexPage.razor" },
        { "tests/focus-trap", "Pages/Tests/FocusTrapPage.razor" },
        { "tests/forms", "Pages/Tests/FormsPage.razor" },
        { "tests/utilities/grid", "Pages/Tests/GridPage.razor" },
        { "tests/icons", "Pages/Tests/IconsPage.razor" },
        { "tests/jumbotrons", "Pages/Tests/JumbotronsPage.razor" },
        { "tests/utilities/layout", "Pages/Tests/LayoutPage.razor" },
        { "tests/listgroup", "Pages/Tests/ListGroupPage.razor" },
        { "tests/listview", "Pages/Tests/ListViewPage.razor" },
        { "tests/livecharts", "Pages/Tests/LiveChartsPage.razor" },
        { "tests/loadingindicator", "Pages/Tests/LoadingIndicatorPage.razor" },
        { "tests/lottie-animation", "Pages/Tests/LottieAnimationPage.razor" },
        { "tests/markdown", "Pages/Tests/MarkdownPage.razor" },
        { "tests/misc-forms", "Pages/Tests/MiscFormPage.razor" },
        { "tests/modal-provider", "Pages/Tests/ModalProviderPage.razor" },
        { "tests/modals", "Pages/Tests/ModalsPage.razor" },
        { "tests/offcanvas", "Pages/Tests/OffcanvasPage.razor" },
        { "tests/utilities/overflow", "Pages/Tests/OverflowPage.razor" },
        { "tests/paginations", "Pages/Tests/PaginationsPage.razor" },
        { "tests/pickers", "Pages/Tests/PickersPage.razor" },
        { "tests/utilities/position", "Pages/Tests/PositionsPage.razor" },
        { "tests/progressbars", "Pages/Tests/ProgressBarsPage.razor" },
        { "tests/qrcode", "Pages/Tests/QRCodePage.razor" },
        { "tests/ratings", "Pages/Tests/RatingPage.razor" },
        { "tests/repeater", "Pages/Tests/RepeaterPage.razor" },
        { "tests/richtextedit", "Pages/Tests/RichTextEditPage.razor" },
        { "tests/selectlist", "Pages/Tests/SelectListPage.razor" },
        { "tests/utilities/services", "Pages/Tests/ServicesPage.razor" },
        { "tests/utilities/shadows", "Pages/Tests/ShadowPage.razor" },
        { "tests/signaturepad", "Pages/Tests/SignaturePadPage.razor" },
        { "tests/utilities/sizing", "Pages/Tests/SizingPage.razor" },
        { "tests/snackbar", "Pages/Tests/SnackbarsPage.razor" },
        { "tests/spinkit", "Pages/Tests/SpinKitPage.razor" },
        { "tests/splitter", "Pages/Tests/SplitterPage.razor" },
        { "tests/steps", "Pages/Tests/StepsPage.razor" },
        { "tests/tables", "Pages/Tests/TablesPage.razor" },
        { "tests/tabs", "Pages/Tests/TabsPage.razor" },
        { "tests/theming", "Pages/Tests/ThemingPage.razor" },
        { "tests/tests/tooltips", "Pages/Tests/TooltipsPage.razor" },
        { "tests/treeview", "Pages/Tests/TreeViewPage.razor" },
        { "tests/typography", "Pages/Tests/TypographyPage.razor" },
        { "tests/validations", "Pages/Tests/ValidationsPage.razor" },
        { "tests/vertical-align", "Pages/Tests/VerticalAlignPage.razor" },
        { "tests/video", "Pages/Tests/VideoPage.razor" },
    };

    private string gitHubDemoUrl;

    protected override void OnInitialized()
    {
        if ( NavigationManager is not null )
        {
            DetermineCurrentUrl();

            NavigationManager.LocationChanged += OnLocationChanged;
        }
    }

    private void OnLocationChanged( object sender, Microsoft.AspNetCore.Components.Routing.LocationChangedEventArgs e )
    {
        DetermineCurrentUrl();

        InvokeAsync( StateHasChanged );
    }

    private void DetermineCurrentUrl()
    {
        var url = NavigationManager.ToBaseRelativePath( NavigationManager.Uri );

        if ( demoToGitHubMapping.TryGetValue( url, out var gh ) )
        {
            gitHubDemoUrl = $"https://github.com/Megabit/Blazorise/blob/master/Demos/Blazorise.Demo/{gh}";
        }
        else
        {
            gitHubDemoUrl = null;
        }
    }

    void IDisposable.Dispose()
    {
        if ( NavigationManager is not null )
        {
            NavigationManager.LocationChanged -= OnLocationChanged;
        }
    }

    [Parameter] public EventCallback<bool> ThemeEnabledChanged { get; set; }

    [Parameter] public EventCallback<bool> ThemeGradientChanged { get; set; }

    [Parameter] public EventCallback<bool> ThemeRoundedChanged { get; set; }

    [Parameter] public EventCallback<string> ThemeColorChanged { get; set; }

    [Parameter] public string LayoutType { get; set; }

    [Parameter] public EventCallback<string> LayoutTypeChanged { get; set; }

    [Inject] protected ITextLocalizerService LocalizationService { get; set; }

    [CascadingParameter] protected Theme Theme { get; set; }
}